<template>
	<div class="layout-main">
		<div class="section">
			<div class="bread-btns">
				<router-link class="btn bread-btn" 	:to='{"path": "/manage/add", query:{apptype: this.$route.query.apptype}}'>新建项目</router-link>  
			</div>
			<el-table border :data="tableData.data" style="width: 100%">	
				<el-table-column :resizable='isBorder' label="标题">
					<template slot-scope="scope">
						<img class="title-pic" :src="scope.row.appavatar">
						<span class="title-name">{{scope.row.appname}}</span>
						<router-link class="title-link" :to="{ path: '/manage/share', query: {id: scope.row.id, step: 1}}">分享</router-link>
						<router-link class="title-link" :to="{ path: '/manage/public', query: {id: scope.row.id}}">公众号</router-link>
						<router-link class="title-link" :to="{ path: '/manage/share', query: {id: scope.row.id, step: 2}}">落地</router-link>
					</template>
				</el-table-column>
				<el-table-column :resizable='isBorder' width='150' label="更新时间" prop="createtime"></el-table-column>
				<el-table-column :resizable='isBorder' label="操作" width="260">
					<template slot-scope="scope">
						<router-link title="日志" :to="{ path: '/manage/log', query: {id: scope.row.id}}"><i class="iconfont icon-rizhi"></i></router-link>
						<router-link title="编辑"  :to="{ path: '/manage/add', query: {id: scope.row.id}}"><i class="iconfont icon-bianji"></i></router-link>
						<a href="javascript:;" title="删除" @click="showdelApplyLayer(scope.row.id)"><i class="iconfont icon-shanchu"></i></a>
						<el-switch v-model="scope.row.id" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-if="tableData.total" :current-page="tableData.filter.pageBean.pageIndex" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]" :page-size="tableData.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
		</div>

		<!-- 取消提案 -->
		<layer class='layer-tips' :data="delLayer" @on-ok="delApplyLayer"></layer>
	</div>
</template>
<script>	
	import layer from '@/components/layer'
	import '@/assets/less/modules/switch.less'
	import '@/assets/less/modules/layer.less'
	export default {
		data() {
			return {				
				isBorder: false,
				delLayer: {
					title: '删除列表',
					show: false,
					tips: '确定删除？'
				},
				tableData:{
					data:[{}]
				}
			}
		},
		components: {
            layer
        },
		computed : {
			apptype () {
				return this.$route.query.apptype
			}
		},
		watch : {
			apptype (val) {
				this.changeBread(val)
			}
		},
		mounted() {
			this.changeBread(this.apptype)

			api.list({apptype: this.apptype}).then(data => {
				console.log(data)
    			this.tableData.data = data.wxd17da7731233b833
    		})
		},		
		methods: {
			changeBread (val) {
				let type = '' 
				switch(val) {
					case 'red' :
						type = '红包项目管理'
						break;
					case 'public' :
						type = '群聊项目管理'
						break;
					case 'video' :
						type = '视频项目管理'
						break;
				}

				this.$store.commit('breadData', {
					pageName: type,
					link:{
						to:'/manage/redAdd',
						name:'新建项目'
					},
					list:[
						{
							name: '项目列表'
						}
					]
				})
			},			
			// 取消提案
			showdelApplyLayer(id) {
				console.log(id)
				this.delLayer.show = true
			},
			delApplyLayer(id) {
				this.delLayer.show = false
				api.del({ id: id, apptype: this.apptype}).then(res => {
					
				})
			}

		}
	}
</script>